<template>
  <div class="view-container">
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="user-list"></el-tab-pane>
      <el-tab-pane label="部门管理" name="department-list"></el-tab-pane>
      <el-tab-pane label="职位管理" name="position-list"></el-tab-pane>
      <el-tab-pane label="用户组(权限)" name="role-list"></el-tab-pane>
    </el-tabs>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'UserPermission',
    data() {
      return {
        activeName:''
      }
    },
    created() {

    },
    methods: {
      handleClick(tab){
        this.activeName = tab.name
        this.$router.push('/system/user-permission/'+tab.name)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
